<template>
  <div class="aside">
    <div class="aside-header">
      <img class="logo" src="@assets/logo.jpg" alt="" />
    </div>
    <div class="aside-main">
      <asideMain @change-chat="$emit('change-chat', $event)" />
    </div>
    <div class="aside-footer">
      <el-popover placement="right"  trigger="hover">
        <template #reference>
          <img :src="userInfo?.pic" alt="" />
        </template>
        <div class="user-info">
          <div class="user-avatar">
            <el-avatar :size="50" :src="userInfo?.pic" />
            <div>昵称：{{ userInfo?.name }}</div>
          </div>
          <div class="user-menu">
            <div @click="openUserSetting">个人设置</div>
            <div  @click="logout">退出登录</div>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import User from "@/utils/user";
import type { UserInfo } from "@/utils/user";
import asideMain from "./asideMain.vue";

//emit
const emit = defineEmits(['change-chat']);

const userInfo = ref<UserInfo | null>({});
const router = useRouter();

onMounted(() => {
  userInfo.value = User.instance.getUserInfo();
});

/**
 * 打开个人设置
 */
const openUserSetting = () => {
  router.push("/chat/userSet");
};

/**
 * 退出登录
 */ 
const logout = () => {
  User.instance.clearUserInfo();
  router.push("/login");
};


</script>

<style scoped lang="scss">
.aside {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--bg-color);
}

.aside-header {
  height: 4rem;
 padding: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  .logo {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.aside-main {
  flex: 1;
  overflow-y: auto;
}

.aside-footer {
  /* height: 5rem; */
 // background-color: #0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;

  img {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 20%;
  }
}
.user-info {
  .user-avatar{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.1rem;
  }
  .user-menu{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    margin-top: 0.1rem;
    div{
      width: 100%;
      border-radius: 0.2rem;
      padding: 0.2rem;
      margin-bottom: 0.1rem;
      &:hover{
        background-color: #ccc;
      }
    }
  }
}
</style>
